<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <composite:interface>

        <composite:attribute name="enabledDisabled"/>

        <composite:attribute name="imageFileDeleteButtonRendered"/>
        <composite:attribute name="imageFileUploadRendered"/>

    </composite:interface>

    <h:panelGrid columns="1"
                 columnClasses="columnWidth100"
                 width="43.2%"
                 style="margin-left: auto; margin-right: auto">

        <p:fieldset style="width: 94%; height: 122px; text-align: center;
                    margin-left: auto; margin-right: auto">

            <p:graphicImage id="imageFile"
                            onclick="PF('imageDialog').show()"
                            styleClass="current_image"
                            style="width: auto; height: auto;
                            max-width: 200px; max-height: 100px"
                            value="#{imageController.imageFile}"
                            cache="false"/>          

        </p:fieldset>      

        <p:commandButton id="imageFileDeleteButton"
                         style="width: 100%"
                         value="#{bundle.Delete}"
                         action="#{imageController.imageFileDestroy}"
                         onclick="imageDestroy();"
                         update=":messages, imageFile, zoomImage, imageFileUpload"
                         immediate="true"
                         rendered="#{cc.attrs.imageFileDeleteButtonRendered}"/>         

    </h:panelGrid>

    <h:panelGrid columns="1"
                 columnClasses="columnWidth100"
                 width="90%"
                 style="margin-left: auto; margin-right: auto">

        <p:fileUpload id="imageFileUpload"
                      style="width: 100%; max-width: 100%"
                      fileUploadListener="#{imageController.imageFileUpload}" 
                      mode="advanced" 
                      dragDropSupport="true"
                      label="#{bundle.Choose}"
                      uploadLabel="#{bundle.Upload}"
                      cancelLabel="#{bundle.Cancel}"
                      allowTypes="/(\.|\/)(jpe?g|png)$/"
                      invalidFileMessage="#{bundle.InvalidFileType}"
                      sizeLimit="524288"
                      invalidSizeMessage="#{bundle.InvalidFileSize}"
                      fileLimit="1"
                      fileLimitMessage="#{bundle.MaximumNumberOfFilesExceeded}"
                      previewWidth="40"
                      update=":messages, imageFile, zoomImage, imageFileUpload"
                      rendered="#{cc.attrs.imageFileUploadRendered}"/>     

    </h:panelGrid> 

    <p:dialog header="#{bundle.Image}"
              widgetVar="imageDialog"
              resizable="false"
              modal="true"
              showEffect="fade"
              hideEffect="fade"
              width="48%"
              style="margin-left: auto; margin-right: auto;
              text-align: center">

        <p:graphicImage id="zoomImage"
                        style="max-width: 90%; max-height: 90%"
                        value="#{imageController.imageFile}"
                        cache="false"/> 

    </p:dialog>  

    <p:dialog header="#{bundle.AdditionalInfo}"
              widgetVar="additionalInfoDialog" 
              resizable="false" 
              modal="true" 
              showEffect="fade"
              hideEffect="fade" 
              draggable="false"
              width="48%"
              style="margin-left: auto; margin-right: auto">

        <h:panelGrid columns="3"
                     columnClasses="columnWidth48, columnWidth4, columnWidth48"
                     width="90%"
                     style="margin-left: auto; margin-right: auto">

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Id}" 
                               for="id"/>

                <p:inputText id="id" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{imageController.selected.id}"
                             disabled="true"/>         

                <p:outputLabel value="#{bundle.CreatedBy}" 
                               for="createdBy"/>

                <p:inputText id="createdBy" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{imageController.selected.createdBy.name}"
                             disabled="true"/>

                <p:outputLabel value="#{bundle.UpdatedBy}" 
                               for="updatedBy"/>

                <p:inputText id="updatedBy"   
                             style="width: 100%"
                             value="#{imageController.selected.updatedBy.name}"
                             disabled="true"/>         

            </h:panelGrid>

            <p:spacer/>

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Enabled}" 
                               for="enabled"/>

                <p:selectBooleanCheckbox id="enabled"
                                         style="vertical-align: -22%; margin-bottom: 4%"
                                         value="#{imageController.selected.enabled}"
                                         disabled="#{cc.attrs.enabledDisabled}"/>         

                <p:outputLabel value="#{bundle.Created}" 
                               for="created"/>

                <p:inputText id="created"
                             style="width: 100%; margin-bottom: 2%"
                             value="#{imageController.selected.created}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>      

                </p:inputText>  

                <p:outputLabel value="#{bundle.Updated}" 
                               for="updated"/>

                <p:inputText id="updated"
                             style="width: 100%"
                             value="#{imageController.selected.updated}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>

                </p:inputText>         

            </h:panelGrid>    

        </h:panelGrid>

    </p:dialog>   

</html>